<template>
	<view class="location-wrap">
		<!-- 定位：定位地址列表切换 -->

		<!-- 搜索框；定位地址 -->
		<view class="location-search">
			<view class="to-location" @click="toCities">
				<u-icon name="map" size="30" color="#666"></u-icon> 
				<!-- 市级 -->
				<text class="left-title right-10 font-25">沈阳</text>
				<u-icon name="arrow-down" size="20" color="#666"></u-icon>
			</view>
			<!-- @click.native="search" disabled-->
					<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" radius="100" placeholder="请输入地址" @blur="blur" @focus="focus" @input="input"
							@cancel="cancel" @clear="clear">
						</uni-search-bar>
			<!-- <u-search-bar 
			style="flex: 1"
			@input="handleSearch"
			 class="nav-search left-10"  :show-action="false"></u-search-bar> -->
		</view>
		<!-- 当前位置 -->
		<view class="current-location">
			<text >{{geoData.addressName}}</text>
			<view  class="re-locate" @click="reLocate('')">
				<u-icon class="iconfont icon-zhongxindingwei right-10" style="font-size: 14px;" size="20">
					
				</u-icon>
				重新定位
			</view>
		</view>
		<!-- 已有地址列表 -->
		<view class="address-list">
			<view class="my-location">
				<u-icon class="iconfont icon-wode-shouhuodizhi" style="font-size:13px" color="#666"></u-icon>
				<!-- 市级 -->
				<text class="left-title font-25">我的地址</text>
			</view>
			<view class="my-address">
				<view class="list-item" v-for="(item, index) in addressList">
					<view class="address-str">{{item.consigneeAddressPath}}</view>
					<view class="user-info">
						<text class="right-20">{{item.name}}</text>
						<!-- <text class="right-40">{{item.gender}}</text> -->
						<text>{{item.mobile}}</text>
					</view>
				</view>
			</view>
			<view v-if="isAddressFold" class="folder-address" @click="unflodAddress">
				<text class="sub-title">展开更多地址</text>
				<u-icon name="arrow-down" size="20" color="#666"></u-icon>
			</view>
			<view v-else class="unfolder-address">
				
			</view>
			<view v-if="!isAddressFold" class="foler-btn folder-address" @click="foldAddress">
				<text class="sub-title">收起全部地址</text>
				<u-icon name="arrow-up" size="20" color="#666"></u-icon>
			</view>
		</view>
		<!-- 附近地址列表 -->
		<view class="near-list">
			<view class="locate-icon">
				<u-icon name="map" size="30" color="#666"></u-icon>
				<!-- 市级 -->
				<text class="left-title font-25">附近地址</text>
			</view>
			<view class="near-address">
				<view class="address-item" v-for="(item, name) in nearList" :key="item.id">
					{{item.addressName}}
				</view>
			</view>
		</view>
		<!-- 新增地址 -->
			<button type="default" class="btn add-btn" @click="addAddress('')">
				<u-icon name="plus-circle"></u-icon>
				添加我的地址
			</button>
	</view>
</template>

<script>
	import * as API_Address from "@/api/address.js";
	import * as API_Locate from '@/api/locate.js'
	export default {
		data() {
			return {
				keyword: '',
				nearAddress: [
					{id: 1, name: '辽宁省和平区'},
					{id: 2, name: '沈阳和平区和平北大街'},
					{id: 3, name: '沈阳市府大路'},
					{id: 4, name: '沈阳和平区北街道'}
				],
				addressList: [
					{
						phone: '15897451244',
						gender: '女',
						user: '李四',
						address: '辽宁省沈阳市'
					}
				],
				isAddressFold: true,
				nearList: [],
				geoData: {},
				adrParams: {
					pageNumber: 1,
					pageSize: 10
				},
				timer: null, // 搜索框防抖计时器
			}
		},
		mounted() {
			
			this.getGeoPage()
		},
		methods: {
			getGeoPage() {
				let param = {
					cityName: '沈阳',
					longitude: 123.46465622596489,
					latitude: 41.677604763338884
				}
				API_Locate.getGeoPage(param).then(res => {
					console.log("get-geo-page-data=", res);
					// 我的地址+附近地址列表
					if(res.statusCode == 200) {
						this.addressList = res.data.result.myAddressList
						this.nearList = res.data.result.nearGeoList
					}
					
				})
			},
			
			handleSearch(e) {
				clearTimeout(this.timer)
				let param = {
					cityName: '沈阳',
					query: '',
					count: 10
				}
				 this.timer = setTimeout(() => {
				                console.log("search-key word==",e);
								this.keyword = e
								console.log("search-key word==",this.keyword);
				            }, 500);
				if(this.keyword !== '') {
					param.query= this.keyword
					API_Locate.addressTextSearch(param).then(res => {
					console.log("text-search=", res);
				})
				}
				
				
			},
			toCities() {
				uni.navigateTo({
					url: "/pages/navigation/locateCity/city-choose"
				});
			},
			//新建。编辑地址
			addAddress(id) {
			  uni.navigateTo({
			    url: `/pages/mine/address/add${id ? "?id=" + id : ""}`,
			  });
			},
			// 重新定位
			reLocate() {
				
			},
			// 展开全部地址
			unflodAddress() {
				this.isAddressFold = false
				
			},
			// 收起全部地址
			foldAddress() {
				this.isAddressFold = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.location-wrap {
		padding: 30rpx;
		
		.font-25 {
			font-size: 25rpx;
		}
	}
	.right-10 {
		margin-right: 10rpx;
	}
	
	.left-10 {
		margin-left: 10rpx;
	}
.location-search {
	display: flex;
	align-items: center;
	padding: 10rpx;
	border-bottom: 1px solid #d9d9d9;
	
	
}
.left-title {
	margin-left: 10rpx;
}
.address-list {
	// padding: 20rpx;
	margin-top: 30rpx;
	border-bottom: 1px solid #d9d9d9;
	
	.my-address  {
		margin-top: 10rpx;
		
		.list-item{
			padding: 20rpx;
			border-bottom: 1px solid #d9d9d9;
			
			.address-str {
				flex-wrap: wrap;
				    margin-bottom: 10rpx;
					color: black;
			}
			.user-info {
				display: flex;
				color: #999;
				font-size: 20rpx;
				
				.right-20 {
					margin-right: 20rpx;
				}
				.right-40 {
					margin-right:40rpx;
				}
				.user-info:last-child {
					flex: 1;
				}
			}
		}
		
	}
	
	.folder-address {
		    height: 60rpx;
		    line-height: 60rpx;
		    padding: 10rpx;
			
			.sub-title {
				margin-right: 10rpx;
			}
	}
}
.near-list {
	margin-top: 30rpx;
	
	.location-icon {
		padding: 20rpx;
		
		
	}
	
	.near-address {
		color: black;
		padding: 0 40rpx 40rpx 40rpx;
		
		.address-item {
			// padding: 10rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 1px solid #d9d9d9;
		}
	}
}
.add-btn {
	position: fixed;
	left: 30rpx;
	bottom: 60rpx;
	width: 690rpx;
}
.current-location {
	// font-size: 40rpx;
	color: black;
	padding: 20rpx;
	border-bottom: 1px solid #d9d9d9;
	display: flex;
	    justify-content: space-between;
	    align-items: center;
	.re-locate {
		color: #e99034;
	}
}
</style>